<template>
  <div class="container">
    <base-title base-title="留言列表" />
    <base-state :base-state="baseStateData" @state-handle="stateHandle" />
    <base-table :total="wordListTotal" :structure="wordListSc" :data="wordListData" btn-items="export" @current-page-change="handleCurrentPageChange">
      <template #operation="{ scope }">
        <el-button type="danger" :icon="Delete" text @click="deleteWord(scope.row.id)">删除</el-button>
        <el-button type="success" :icon="User" text @click="examineWord(scope.row)">审核</el-button>
      </template>
    </base-table>
    <el-dialog v-model="examineDialog" title="审核留言" @close="dialogClose">
      <el-form :model="examineForm" :rules="examineRule" ref="examineRef">
        <el-form-item label="是否通过审核" prop="is_examine">
          <el-select v-model="examineForm.is_examine" placeholder="请选择">
            <el-option label="通过" value="1" />
            <el-option label="不通过" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="examineDialog = false">取消</el-button>
          <el-button type="primary" @click="onsubExamine(examineRef)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" name="wordList" setup>
  import { ref, reactive, onBeforeMount } from 'vue'
  import { Delete, User } from '@element-plus/icons-vue'
  import { ElMessageBox, FormRules, FormInstance } from 'element-plus'
  import { wordListSc } from '@/components/base-table/config'
  import {
    deleteWordRequest,
    examineSuccessWordRequest,
    examineFailWordRequest,
    queryWordListRequest,
    queryUnExamineRequest,
    queryExamineRequest,
    queryFailExamineRequest,
  } from '@/network/api/word-api'
  import formatUtcTime from '@/utils/formatTime'
  import baseState from '@/components/base-state/Index.vue'
  import baseTable from '@/components/base-table/baseTable.vue'
  import notification from '@/utils/notification'
  const wordListData = ref([])
  const wordListTotal = ref<number>(0)
  const baseStateData = ref(['全部', '未审核', '审核通过', '审核未通过'])
  const currentState = ref<number>(0)
  const examineDialog = ref(false)
  const examineForm = reactive({
    word_id: 0,
    is_examine: '',
  })
  const examineRef = ref<FormInstance>()
  const examineRule = reactive<FormRules>({
    is_examine: [{ required: true, message: '审核内容为必选项~', trigger: 'blur' }],
  })

  const wordListPageInit = async (index: number, currentPage: number = 1) => {
    let result = null
    switch (index) {
      case 0:
        result = await queryWordListRequest(currentPage)
        wordListData.value = result.result.data
        wordListTotal.value = result.result.total
        break
      case 1:
        result = await queryUnExamineRequest(currentPage)
        wordListData.value = result.result.data
        wordListTotal.value = result.result.total
        break
      case 2:
        result = await queryExamineRequest(currentPage)
        wordListData.value = result.result.data
        wordListTotal.value = result.result.total
        break
      case 3:
        result = await queryFailExamineRequest(currentPage)
        wordListData.value = result.result.data
        wordListTotal.value = result.result.total
        break
      default:
        break
    }
    wordListData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      switch (item.is_examine) {
        case 0:
          item.is_examine = '未审核'
          item.state = 'danger'
          break
        case 1:
          item.is_examine = '审核通过'
          item.state = 'success'
          break
        case 2:
          item.is_examine = '审核未通过'
          item.state = 'info'
          break
        default:
          break
      }
    })
  }

  onBeforeMount(async () => {
    await wordListPageInit(0)
  })

  const stateHandle = async (index: number) => {
    currentState.value = index
    await wordListPageInit(index)
  }

  const deleteWord = async (id: number) => {
    const reslt = await ElMessageBox.confirm('确定删除吗？', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(err => err)
    if (reslt === 'cancel') {
      return notification.info('再想想~')
    } else if (reslt === 'confirm') {
      const result = await deleteWordRequest(id)
      notification.success(result.msg)
      await wordListPageInit(currentState.value)
    }
  }

  const examineWord = (row: any) => {
    if (row.is_examine === '审核通过') return notification.info('审核已经通过~')
    examineForm.word_id = row.id
    examineDialog.value = true
  }

  const dialogClose = () => {
    examineForm.is_examine = ''
    examineForm.word_id = 0
  }

  const onsubExamine = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        if (examineForm.is_examine === '1') {
          // 审核通过
          const result = await examineSuccessWordRequest(examineForm.word_id)
          notification.success(result.msg)
          examineDialog.value = false
          await wordListPageInit(currentState.value)
        } else {
          // 审核不通过
          const result = await examineFailWordRequest(examineForm.word_id)
          notification.success(result.msg)
          examineDialog.value = false
          await wordListPageInit(currentState.value)
        }
      } else {
        return
      }
    })
  }

  const handleCurrentPageChange = async (currentPage: number) => {
    await wordListPageInit(currentState.value, currentPage)
  }
</script>

<style scoped lang="less"></style>
